<template>
	<view style="width: 100%;">
		<view class="itemBox" :class="type == 2 ? 'yellow' : ''">
			<view class="user flex">
				<!-- {{item.avatar.length}} -->
				<!-- {{toImages(item.avatar)}} -->
				<u-image width="200rpx" height="200rpx" style="flex-shrink: 0;" :src="toImages(item.avatar)" border-radius="30rpx"></u-image>
				<view class="label">
					<view class="flex flex-center">
						<u-image v-if="item.user_labels&&item.user_labels.length!=0" width="50rpx" height="30rpx" :src="toImages(item.user_labels[0].url)"
							style="margin-right: 20rpx;"></u-image>
						<view class="userName">{{item[$t("item.username")]}}</view>
					</view>
					<view style="margin: 30rpx 0;">{{$t("所在行业")}}</view>
					<Tag :text="item.industry || $t('暂无信息')" color="#ff9a22"></Tag>
				</view>
			</view>
			<view class="toppingByList" v-if="item.is_topping == '2'">
				<u-icon name="arrow-upward"></u-icon>
			</view>
			<view class="location flex">
				<view class="flex">
					<u-image width="40rpx" mode="scaleToFill" height="40rpx" :src="HTTP_IMG_UTL + 'agencyIcon3.png'"
						style="margin-right: 10rpx;transform: translateY(-2rpx);"></u-image>
					<view class="city">
						{{item[$t('item.city.mergename')] || $t("暂无信息")}}
					</view>
				</view>
				<view>
					<user-rating :num="item.rating" />
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import UserRating from "@/components/userRating.vue";

	import {
		time,
		isBase64
	} from "@/common/public";
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from "@/config/app";
	import Tag from '@/components/Tag.vue'
	export default {
		components: {
			Tag,
			UserRating
		},
		computed: {
			toImages() {
				return (src) => {
					return isBase64(src) ? src : IMAGE_URL + src
				}
			},
			storeImages() {
				return (sum, images) => images.length > sum ? images.splice(sum) : images
			},
		},
		props: {
			item: {
				type: Object,
				default: {
					user_labels:[]
				},
			},
			type: {
				type: String | Number,
				default: '1',
			},
			isOrder: {
				type: [Boolean,Number],
				default: false,
			}
		},
		data() {
			return {
				HTTP_IMG_UTL
			}
		},
		methods: {
			time
		}
	}
</script>

<style lang="scss" scoped>
	.itemBox {
		box-shadow: 0 0 10px #ddd;
		background: #ddd;
		padding: 10px;
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 20rpx;
		position: relative;
		font-size: 32rpx;

		.flex {
			display: flex;
		}

		.flex-center {
			align-items: center;
		}

		.user {
			.label {
				margin-left: 30rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
			}
		}

		.location {
			margin-top: 30rpx;
			justify-content: space-between;

			.flex {
				align-items: center;
			}
			.city{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				min-width: 200rpx;
				max-width: 300rpx;
			}
		}

	}
</style>